<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>医疗管家</title>
    <meta name="description" content="医疗管家">
    <meta name="keywords" content="医疗管家">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/menu.css">
</head>
<body class="hold-transition">
<div id="app">
    <div class="content-header">
        <h1>预约管理<small>角色管理</small></h1>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色管理</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-col :span="14">
        <div>
            <div>
                <el-row>
                    <el-col :span="14">
                        <el-input
                                placeholder="输入关键字进行过滤"
                                v-model="filterText">
                        </el-input>
                    </el-col>
                </el-row>
                <el-row>
                </el-row>
            </div>
            <el-row>
                <el-tree
                        class="filter-tree"
                        :data="data"
                        :props="defaultProps"
                        default-expand-all
                        :filter-node-method="filterNode"
                        ref="tree">
                 <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button
                  type="text"
                  size="max"
                  @click="append(data)">
            编辑
          </el-button>
          <el-button
                  type="text"
                  size="max"
                  @click="remove(node, data)">
             删除
          </el-button>
        </span>
       </span>
                </el-tree>
            </el-row>
        </div>
    </el-col>
    <el-col :span="2">
        <el-row>
            <div>
            </div>
        </el-row>
    </el-col>
    <el-col :offset="2" :span="7">
        <div class="add-form"
             style="background-color:white; box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);padding: 20px"
        >
            <!-- 被校验的表单必须有这个属性 ref -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
               <span v-if="true">修改菜单</span>
            </el-tabs>
            <el-form ref="dataAddForm" :model="formData" label-position="right" label-width="120px" label-h>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="菜单名称" prop="name">
                            <el-input v-model="formData.name"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="18">
                        <el-form-item label="父菜单">
                            <el-select v-model="formData.parentmenuid">
                                <el-option v-for="item in parentList" :label="item.name" :value="item.id"
                                           :key="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="URL">
                            <el-input v-model="formData.linkurl"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="path">
                            <el-input v-model="formData.path"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="优先权">
                            <el-input v-model="formData.priority"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="icon">
                            <el-input v-model="formData.icon"/>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="20">
                        <el-form-item label="说明">
                            <el-input v-model="formData.description"/>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="updateMenu()">确定</el-button>
            </div>
        </div>
    </el-col>
</div>
</body>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>

    var vue = new Vue({
        el: '#app',

        data: {
            methodName:"",
            defaultProps: '',
            filterText: '',
            dialogFormVisible: false,
            formData: {},
            data: [],
            parentList: [],
        },
        watch: {
            filterText(val) {
                this.$refs.tree.filter(val);
            }
        },
        created() {
            this.list();
            this.parents();
        },
        methods: {
            methodName(){

            },

            list() {
                axios.get("http://localhost:9002/menu/list").then(resp => {

                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                        this.data = resp.data.data;
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })
            },
            parents() {
                axios.get("http://localhost:9002/menu").then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                        this.parentList = resp.data.data;
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })
            },
            append(data) {
                axios.get(`http://localhost:9002/menu/${data.id}`).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                        this.formData = resp.data.data;
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })

            },
            updateMenu() {
                axios.put("http://localhost:9002/menu", this.formData).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })
            },
            remove(node, data) {
                axios.delete(`http://localhost:9002/menu/${data.id}`).then(resp => {
                    if (resp.data.flag) {
                        this.$message.success(resp.data.message);
                    } else {
                        this.$message.error(resp.data.message);
                    }
                })
            },
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            }

        }
    })
</script>
</html>
